<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单验证</title>
    <style>
        form {
            width: 450px;
            margin: 0 auto;
            padding: 10px 20px;
            background: skyblue;
            border-radius: 4px;
        }

        label {
            width: 100px;
            text-align: center;
            margin: 10px 0;
        }

        div {
            display: flex;
            position: relative;
        }

        input {
            width: 300px;
            margin: 10px 0;
        }

        button {
            margin: 10px;
        }

        span {
            font-size: 12px;
            position: absolute;
            right: 50px;
            bottom: -7px;
        }

        .conform {
            color: #58bc58;
        }

        .unConform {
            color: red;
        }
    </style>
</head>

<body>
    <form action="">
        <div>
            <label for="">账号</label><input type="text" id='account' placeholder="用户不得使用特殊字符，长度在6-20之间">
            <span class="conform"></span>
        </div>
        <div>
            <label for="">昵称</label><input type="text" id='username' placeholder='中文长度3-6之间'>
            <span class="unConform"></span>
        </div>
        <div>
            <label for="">电子邮件</label><input type="text" id='email' placeholder='163邮箱'>
            <span></span>
        </div>
        <div>
            <label for="">身份证</label><input type="text" id='cardID' placeholder='18位身份证号码'>
            <span></span>
        </div>
        <div>
            <label for="">手机号码</label><input type="text" id='phone' placeholder='11位手机号'>
            <span></span>
        </div>
        <div>
            <label for="">生日</label><input type="text" id='birth' placeholder='1999/05/08|1999-05-08|19990508'>
            <span></span>
        </div>
        <div>
            <label for="">密码</label><input type="password" id='password' placeholder=''>
            <span></span>
        </div>
        <div>
            <label for="">确认密码</label><input type="password" id='confirmPassword' placeholder=''>
            <span></span>
        </div>
        <div>
            <button class="checkBtn">确定</button>
            <button class="clearBtn">清空</button>
        </div>
    </form>

    <script>
        // 获取元素
        var account = document.querySelector('#account');
        var username = document.querySelector('#username');
        var email = document.querySelector('#email');
        var cardID = document.querySelector('#cardID');
        var phone = document.querySelector('#phone');
        var birth = document.querySelector('#birth');
        var password = document.querySelector('#password');
        var confirmPassword = document.querySelector('#confirmPassword');
        var checkBtn = document.querySelector('.checkBtn');
        var clearBtn = document.querySelector('.clearBtn');

        // 1.账号
        var isAcc;
        account.onblur = function () {
            // 获取提示框
            var span = account.nextElementSibling;
            if (account.value) {
                var accountReg = /^[a-z][a-zA-z0-9_-]{5,19}$/;  // 字母开头，数字、字母、下划线、横杠组成，长度6-20
                if (accountReg.test(account.value)) {
                    span.innerHTML = '通过';
                    span.className = 'conform';
                    isAcc = true;
                } else {
                    span.innerHTML = '请输入符合要求的账号';
                    span.className = 'unConform';
                    isAcc = false;
                }
            } else {
                span.innerHTML = '请输入非空账号';
                span.className = 'unConform';
                isAcc = false;
            }
        }

        // 2.昵称
        var isUser;
        username.onblur = function () {
            // 获取提示框
            var span = username.nextElementSibling;
            if (username.value) {
                var usernameReg = /[\u4e00-\u9fa5]{3,6}/;  // 3-6个中文
                if (usernameReg.test(username.value)) {
                    span.innerHTML = '通过';
                    span.className = 'conform';
                    isUser = true;
                } else {
                    span.innerHTML = '请输入符合要求的昵称';
                    span.className = 'unConform';
                    isUser = false;
                }
            } else {
                span.innerHTML = '请输入非空昵称';
                span.className = 'unConform';
                isUser = false;
            }
        }

        // 3.电子邮件
        var isEmail;
        email.onblur = function () {
            // 获取提示框
            var span = email.nextElementSibling;
            if (email.value) {
                var emailReg = /^[a-zA-Z][a-zA-Z0-9_-]*@163\.(com|cn|net)$/;  // 163邮箱；英文开头,@前面的内容可以包含数字字母下划线、-(可以多位)；@后面的域名只能是163；域名后缀（.com .cn .net）可以有多个
                if (emailReg.test(email.value)) {
                    span.innerHTML = '通过';
                    span.className = 'conform';
                    isEmail = true;
                } else {
                    span.innerHTML = '请输入符合要求的电子邮件';
                    span.className = 'unConform';
                    isEmail = false;
                }
            } else {
                span.innerHTML = '请输入非空电子邮件';
                span.className = 'unConform';
                isEmail = false;
            }
        }

        // 4.身份证
        var isCardID;
        cardID.onblur = function () {
            // 获取提示框
            var span = cardID.nextElementSibling;
            if (cardID.value) {
                var cardIDReg = /^[0-9]{17}[0-9xX]$/;  // 18位数 后面以为可能是 X x
                if (cardIDReg.test(cardID.value)) {
                    span.innerHTML = '通过';
                    span.className = 'conform';
                    isCardID = true;
                } else {
                    span.innerHTML = '请输入符合要求的身份证号码';
                    span.className = 'unConform';
                    isCardID = false;
                }
            } else {
                span.innerHTML = '请输入非空身份证号码';
                span.className = 'unConform';
                isCardID = false;
            }
        }

        // 5.手机号码
        var isPhone;
        phone.onblur = function () {
            // 获取提示框
            var span = phone.nextElementSibling;
            if (phone.value) {
                var phoneReg = /^1[345678]\d{9}$/;  // 11位 开头必须是 1,第二位必须是 345678 还剩下 8-9位只要是数字
                if (phoneReg.test(phone.value)) {
                    span.innerHTML = '通过';
                    span.className = 'conform';
                    isPhone = true;
                } else {
                    span.innerHTML = '请输入符合要求的手机号码';
                    span.className = 'unConform';
                    isPhone = false;
                }
            } else {
                span.innerHTML = '请输入非空手机号码';
                span.className = 'unConform';
                isPhone = false;
            }
        }

        // 6.生日
        var isBirth;
        birth.onblur = function () {
            // 获取提示框
            var span = birth.nextElementSibling;
            if (birth.value) {
                var birthReg = /^[0-9]{4}(\/|-)?(0?[1-9]|1[0-2])\1(0[1-9]|[1-2][0-9]|3[0-1])$/;  // 1999/05/08|1999-05-08|19990508，可以不补0
                if (birthReg.test(birth.value)) {
                    span.innerHTML = '通过';
                    span.className = 'conform';
                    isBirth = true;
                } else {
                    span.innerHTML = '请输入符合要求的生日';
                    span.className = 'unConform';
                    isBirth = false;
                }
            } else {
                span.innerHTML = '请输入非空生日';
                span.className = 'unConform';
                isBirth = false;
            }
        }

        // 7.密码
        var isPassword;
        password.onblur = function () {
            // 获取提示框
            var span = password.nextElementSibling;
            if (password.value) {
                var passwordReg = /^\w{6,20}$/;  // 长度小于20；不能包含空格
                if (passwordReg.test(password.value)) {
                    span.innerHTML = '通过';
                    span.className = 'conform';
                    isPassword = true;
                } else {
                    span.innerHTML = '请输入符合要求的密码';
                    span.className = 'unConform';
                    isPassword = false;
                }
            } else {
                span.innerHTML = '请输入非空密码';
                span.className = 'unConform';
                isPassword = false;
            }
        }

        // 8.确认密码
        var isConfirmPassword;
        confirmPassword.onblur = function () {
            // 获取提示框
            var span = confirmPassword.nextElementSibling;
            if (confirmPassword.value) {
                if (confirmPassword.value === password.value) {
                    span.innerHTML = '密码一致';
                    span.className = 'conform';
                    isConfirmPassword = true;
                } else {
                    span.innerHTML = '密码不一致，请重新输入';
                    span.className = 'unConform';
                    isConfirmPassword = false;
                }
            } else {
                span.innerHTML = '请输入非空密码';
                span.className = 'unConform';
                isConfirmPassword = false;
            }
        }

        // 9.提交确定
        checkBtn.onclick = function () {
            if (isAcc) {
                if (isUser) {
                    if (isEmail) {
                        if (isCardID) {
                            if (isPhone) {
                                if (isBirth) {
                                    if (isPassword) {
                                        if (isConfirmPassword) {
                                            event.preventDefault();
                                            alert('验证成功');
                                        }else{
                                            alert('请根据红色提示信息填写表单')
                                            event.preventDefault();
                                        }
                                    }else{
                                        alert('请根据红色提示信息填写表单')
                                        event.preventDefault();
                                    }
                                }else{
                                    alert('请根据红色提示信息填写表单')
                                    event.preventDefault();
                                }
                            }else{
                                alert('请根据红色提示信息填写表单')
                                event.preventDefault();
                            }
                        }else{
                            alert('请根据红色提示信息填写表单')
                            event.preventDefault();
                        }
                    }else{
                        alert('请根据红色提示信息填写表单')
                        event.preventDefault();
                    }
                }else{
                    alert('请根据红色提示信息填写表单')
                    event.preventDefault();
                }
            }else{
                alert('请根据红色提示信息填写表单')
                event.preventDefault();
            }
        }

        // 10.清空
        clearBtn.onclick = function(){
            var inputs = document.querySelectorAll('input');
            inputs.forEach(function(item,index){
                item.value = '';
                item.nextElementSibling.className = '';
                item.nextElementSibling.innerHTML = '';
            })
            event.preventDefault();
        }

    </script>
</body>

</html>